<!--标签管理-->

<template>
    <!--分类相关操作区开始-->
    <div class="card">
        <el-button type="primary" @click="handleAdd" style="margin: 0 20px">新增标签</el-button>
        <el-button type="danger" @click="deleteTagBatch" style="margin: 0 20px">批量删除</el-button>
<!--        <el-button type="success"  style="margin: 0 20px">批量导入</el-button>-->
<!--        <el-button type="warning"  style="margin: 0 20px">批量导出</el-button>-->
        <el-input :prefix-icon="Search" placeholder="请输入标签名称"
                  v-model="data.tagName"
                  clearable
                  style="width: 240px; margin: 0 20px"/>
        <el-button @click="reset" style="margin: 0 20px">重置</el-button>
        <el-button type="primary" @click="tagload" style="margin: 0 20px">查询</el-button>
    </div>
    <!--分类相关操作区结束-->

    <!-- 分类列表开始 -->
    <div class="card">
        <!-- el-table-column 的 template 标签中使用 #default="scope"，这是作用域插槽的写法，通过 scope 可以访问到当前行的数据对象 scope.row。 -->
        <el-table :data="data.tableData" style="width: 100%; min-height: 350px"
                  :header-cell-style="{ fontWeight: 'bold', color: '#1d1c1c', textAlign: 'center', backgroundColor: '#f5f4f1'}"
                  :cell-style="{ textAlign: 'center' }"
                  @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="30" />  <!--选择框-->
            <el-table-column prop="tagId" label="序号" />
            <el-table-column prop="tagName" label="标签名称" />
            <el-table-column prop="created_at" label="创建时间" />
            <el-table-column prop="updated_at" label="最近更新时间" />
            <el-table-column fixed="right" label="操作" min-width="80">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" @click="deleteTag(scope.row.tagId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 角色列表结束 -->

    <!--数据分页功能区开始-->
    <div class="card">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 20]"
            :total="data.total"
            @current-change="tagload"
            @size-change="tagload"
        />  <!--@current-change : 改变时触发，再次请求一次数据，实现分页查询;  @size-change: 数量改变触发-->
    </div>
    <!--数据分页功能区结束-->

    <!-- 新增/修改用户弹窗开始 -->
    <el-dialog title="新增标签" v-model="data.dialogFormVisible" width="400" destroy-on-close align-center>
        <el-form ref="tagformRef" :model="data.tagForm" :rules="data.rules" label-width="80px" style="padding: 20px 30px 10px 20px">
            <el-form-item label="标签名称" prop="tagName">
                <el-input v-model="data.tagForm.tagName" autocomplete="off" style="width: 230px"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="sava">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 新增分类弹窗开始 -->

</template>

<script setup>
import {Delete, Search} from "@element-plus/icons-vue";
import {reactive, ref} from "vue"
import { markRaw } from 'vue'
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

// 数据
const data = reactive({
    tagName: '',
    tableData: [], // 分类数据列表
    pageNum: 1, //当前页面
    pageSize: 10, //页面数量
    total: 0,  //数据总数
    dialogFormVisible: false,
    tagForm: {}, //分类信息表单
    rules: {
        tagName: [
            { required: true, message: "请填写标签", trigger: 'change' },
            {max:15, message: "账号最多15位", trigger: 'blur'}
        ],
    },
})

// 角色查询
const tagload = () => {
    // 前后端数据查询
    request.get('/api/cata/selectTagPage', {
        params : {
            pageNum : data.pageNum,
            pageSize : data.pageSize,  //添加参数给后端实现分页
            tagName: data.tagName, // 查询参数
        }
    }).then(res => {
        if (res.code === "200") {
            data.tableData = res.data.list // 获取后端返回的所有用户信息
            data.total = res.data.total    // 后台数据总数
        } else {
            ElMessage.error(res.msg)
        }
    })
}
tagload()

// 表单绑定
const tagformRef = ref();
// 取消
const cancel = () => {
    data.dialogFormVisible = false
    data.tagForm = {}
}
// 兼容 新增和修改
const sava = () => {
    data.tagForm.tagId ? editTag() : tagAdd()
}

// 新增弹窗控制
const handleAdd = () => {
    data.dialogFormVisible = true
    data.tagForm = {}
}
// 修改角色方法
const tagAdd = () => {
    tagformRef.value.validate((valid) => {
        if (valid) {
            request.post('/api/cata/tagAdd',data.tagForm).then(res => {
                if (res.code === "200")  {
                    ElMessage.success("标签添加成功")
                    tagload()
                    data.dialogFormVisible = false
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })
}
// 删除按钮
const deleteTag = (tagId) => {
    ElMessageBox.confirm('您确定删除此角色嘛 此操作不可逆转！请谨慎操作！', '删除确认', {
        type: 'warning',
        icon: markRaw(Delete),
    }).then(res => {
        request.delete('/api/cata/tagDel/' + tagId).then(res => {
            if (res.code === "200") {
                ElMessage.success("删除成功");
                tagload()
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch(err => {

    })
}

// table 的多选事件 @selection-change="handleSelectionChange"
const handleSelectionChange = (rows) => {  // rows 就是实际选择的数组
    data.rows = rows
}
// 批量删除事件方法
const deleteTagBatch = () => {
    if (data.rows.length === 0) {
        ElMessage.warning('请选择数据')
        return
    }
    ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning', icon: markRaw(Delete)}).then(res => {
        request.delete('/api/cata/deleteTagBatch', { data: data.rows }).then(res => {
            if (res.code === '200') {
                ElMessage.success('批量删除成功')
                tagload()
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch(err => {})
}
// 修改弹窗
const handleEdit = (row) => {
    data.dialogFormVisible = true
    data.tagForm = JSON.parse(JSON.stringify(row));
}
// 修改角色方法
const editTag = () => {
    tagformRef.value.validate((valid) => {
        if (valid) {
            request.put('/api/cata/updateTag', data.tagForm).then(res => {
                if (res.code === '200') {
                    ElMessage.success('标签修改成功')
                    tagload() //加载最新数据
                    data.dialogFormVisible = false // 关闭弹窗
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })
}

// 重置按钮
const reset = () => {
    data.tagName = null
    tagload()
}
</script>

<style scoped>

</style>